<script lang="ts" setup>
import { RouteMap, useRouter } from '@/router';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const router = useRouter();
</script>

<template>
  <uv-tabbar
    :border="false"
    :value="router.state"
    active-color="#3d3d3d"
    inactive-color="#adaeb0"
    @change="router.to"
  >
    <uv-tabbar-item :name="RouteMap.home" :text="t('LKey_home')">
      <template v-slot:active-icon>
        <image class="w-6 h-6" src="/static/icon_tabbar_home_active.png"></image>
      </template>
      <template v-slot:inactive-icon>
        <image class="w-6 h-6" src="/static/icon_tabbar_home.png"></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item :name="RouteMap.hotels" :text="t('LKey_discover')">
      <template v-slot:active-icon>
        <image class="w-6 h-6" src="/static/icon_tabbar_hotels_active.png"></image>
      </template>
      <template v-slot:inactive-icon>
        <image class="w-6 h-6" src="/static/icon_tabbar_hotels.png"></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item :name="RouteMap.trips" :text="t('LKey_trip')">
      <template v-slot:active-icon>
        <image class="w-6 h-6" src="/static/icon_tabbar_trips_active.png"></image>
      </template>
      <template v-slot:inactive-icon>
        <image class="w-6 h-6" src="/static/icon_tabbar_trips.png"></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item :name="RouteMap.user" :text="t('LKey_account')">
      <template v-slot:active-icon>
        <image class="w-6 h-6" src="/static/icon_tabbar_user_active.png"></image>
      </template>
      <template v-slot:inactive-icon>
        <image class="w-6 h-6" src="/static/icon_tabbar_user.png"></image>
      </template>
    </uv-tabbar-item>
  </uv-tabbar>
</template>
